<template>
  <div>
    <!-- 操作按钮 -->
    <el-button
      type="primary"
      style="margin: 10px"
      size="medium"
      @click="addRole"
    >新增角色</el-button>
    <el-button type="danger" size="medium">批量删除</el-button>
    <!-- 表格内容 -->
    <el-table border :data="tableData" style="margin: 10px">
      <el-table-column align="center" type="selection" width="55" />
      <el-table-column align="center" label="ID">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="角色名称">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="角色描述">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="是否系统角色">
        <template slot-scope="scope">
          <el-tag size="medium">{{ scope.row.isRole? '是':'否' }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="warning"
            :disabled="scope.row.id==1"
            @click="handleEdit(scope.$index, scope.row)"
          >修改</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <div class="block" align="center">
      <el-pagination
        :current-page="currentPage"
        :page-sizes="[1, 2, 3, 4]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="5"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <!-- 新增角色弹窗 -->
    <el-dialog
      title="新增"
      :visible.sync="addRoleShowDialog"
      width="30%"
      :before-close="handleClose"
    >
      <el-form ref="addForm" label-width="80px" :rules="addRules" :model="addForm">
        <el-form-item label="角色名称" prop="name">
          <el-input v-model="addForm.name" />
        </el-form-item>
        <el-form-item label="角色描述" prop="desc">
          <el-input v-model="addForm.desc" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addRoleShowDialog = false">取 消</el-button>
        <el-button type="primary" @click="addRoleShowDialog = false">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 修改角色弹窗 -->
    <el-dialog
      title="修改"
      :visible.sync="editRoleShowDialog"
      width="30%"
      :before-close="editForm"
    >
      <el-form ref="editForm" label-width="80px" :rules="editRules" :model="editForm">
        <el-form-item label="角色名称" prop="name">
          <el-input v-model="editForm.name" />
        </el-form-item>
        <el-form-item label="角色描述" prop="desc">
          <el-input v-model="editForm.desc" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editRoleShowDialog = false">取 消</el-button>
        <el-button type="primary" @click="editRoleShowDialog = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getRoleList } from '@/api/role'
export default {
  data() {
    return {
      tableData: [
        {
          id: '1',
          name: '系统管理员',
          isRole: true
        },
        {
          id: '2',
          name: '系统管理员',
          isRole: true
        },
        {
          id: '3',
          name: '系统管理员',
          isRole: true
        },
        {
          id: '4',
          name: '系统管理员',
          isRole: true
        }
      ],
      addRules: {
        name: [
          { required: true, message: '请输入角色名称', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        desc: [
          { required: true, message: '请输入角色描述', trigger: 'blur' }
        ] },
      editRules: {
        name: [
          { required: true, message: '请输入角色名称', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        desc: [
          { required: true, message: '请输入角色描述', trigger: 'blur' }
        ] },
      currentPage: 1,
      addRoleShowDialog: false,
      editRoleShowDialog: false,
      addForm: {
        name: '',
        desc: ''
      },
      editForm: {
        name: '',
        desc: ''
      }
    }
  },
  created() {
    // this.getRoleList()
  },
  methods: {
    async getRoleList() {
      try {
        const data = await getRoleList()
        console.log(data)
      } catch (err) {
        console.log(err)
      }
    },
    addRole() {
      this.addRoleShowDialog = true
    },
    handleClose(done) {
      console.log(done)
      this.addRoleShowDialog = false
    },
    handleEdit(index, row) {
      console.log(index, row)
      this.editRoleShowDialog = true
    },
    handleDelete(index, row) {
      console.log(index, row)
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
    }
  }

}
</script>
<style  scoped>

</style>
